<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "conment",
});
</script>
<script setup lang="ts">
import { reactive, ref, toRefs, computed, watch, onMounted } from "vue";
import { Router } from "@/utils/router";
import love1 from "@/package/famous-talk/static/love1.png";
import love2 from "@/package/famous-talk/static/love2.png";
import Comment2 from "./comment2.vue";
import LoveItem2 from "./love-item2.vue";

import ReplayContent from "./reply-content.vue";
type dataType = {
  id: number; //评论ID
  cdate: string; //创建时间
  head_img: string; //评论人头像
  nickname: string; //评论人昵称
  like_count: number; //点赞数量
  reply_count: number; //回复数量
  score: number; //评分
  is_good: number; //是否优质评论 1是0不是
  is_author: number; //是否作者评论 1是0否
  content: string; //评论内容
  is_like: string; //是否点赞 1是0不是
  reply_list: any[];
};
const props = defineProps<{
  data: dataType;
  parent_id: string;
  getCommenList: Function;
}>();
const visible = ref(false);
const isLove = ref(false);
const childLength = ref(1);
const data = ref<any[]>([]);
onMounted(() => {
  data.value = props.data.reply_list;
});
watch(props, () => {
  console.log("props.data.reply_list", props.data);
  data.value = props.data.reply_list;
});
//评论弹窗 ------------------------------------
const ReplayContentref = ref<typeof ReplayContent>();
const replyClick = () => {
  ReplayContentref.value?.show({
    nickname: "回复：" + props.data.nickname,
    relation_id: props.parent_id,
    comment_id: props.data.id,
    type: 23,
  });
};
const replyClick2 = (id: number) => {
  ReplayContentref.value?.show({
    nickname: "回复：" + props.data.nickname,
    relation_id: props.parent_id,
    comment_id: id,
    type: 23,
  });
};
const confirm = () => {
  props.getCommenList();
};
const changeChildLength = () => {
  if (childLength.value == 1) {
    childLength.value = props.data.reply_list?.length;
  }
};

// ---------------------------------------------------
const { nickname, content, head_img, cdate, id, like_count, reply_count } =
  toRefs(props.data);
</script>

<template>
  <view class="commentWrap1">
    <view class="leftWrap">
      <image :src="head_img" mode="scaleToFill" />
    </view>
    <view class="rightbox">
      <view class="rightbox1">
        <view class="midle">
          <view class="line1">
            <view class="name"> {{ nickname }}</view>
          </view>
          <view class="line2">
            {{ content }}
          </view>
          <view class="line3">
            <view class="date">{{ cdate }}</view>
            <view class="reply" @click="replyClick">回复</view>
          </view>
        </view>
        <view class="rightWrap">
             <LoveItem2   :id="props.data.id" :like_count="props.data.like_count" :is_like="props.data.is_like" @love="confirm"/>
        </view>
      </view>
      <template v-for="(item2,index) in data" :key="item2.id">
        <view class="commentWrap2" v-if="index<childLength">
          <view class="leftWrap">
            <image :src="item2.head_img" mode="scaleToFill" />
          </view>
          <view class="rightbox">
            <view class="midle">
              <view class="line1">
                <view class="name"> {{ item2.nickname }} </view>
                <view class="isWriter" v-if="item2.is_author"> 作者 </view>
              </view>
              <view class="line2">
                <text>回复&nbsp;</text>
                <text>{{ item2.reply_nickname }}：</text>
                <text>{{ item2.content }}</text>
              </view>
              <view class="line3">
                <view class="date">{{ item2.cdate }}</view>
                <view class="reply" @click="replyClick2(item2.id)">回复</view>
              </view>
            </view>
            <view class="rightWrap">
              <view class="love">
                <LoveItem2   :id="item2.id" :like_count="item2.like_count" :is_like="item2.is_like" @love="confirm"/>
              </view>
            </view>
          </view>
        </view>
      </template>

      <view class="reply222" v-if="reply_count > 1&&childLength == 1&&data.length" @click="changeChildLength">
        展开{{ reply_count }}条回复
      </view>
    </view>
    <ReplayContent ref="ReplayContentref" @confirm="confirm" />
  </view>
</template>

<style lang="scss">
.commentWrap1 {
  margin-top: 30rpx;
  display: flex;
  width: 100%;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #eeeeee;
  .leftWrap {
    width: 64rpx;
    height: 64rpx;
    border-radius: 34rpx;
    overflow: hidden;
    flex-shrink: 0;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .rightbox {
    flex-grow: 1;
    .rightbox1 {
      display: flex;
      .midle {
        margin-left: 20rpx;
        flex-grow: 1;
        .line1 {
          .name {
            font-size: 28rpx;
            color: #b2b2b2;
            line-height: 40rpx;
          }
        }
        .line2 {
          margin-top: 10rpx;
          font-size: 28rpx;
          color: #333333;
          line-height: 40rpx;
        }
        .line3 {
          margin-top: 10rpx;
          display: flex;
          .date {
            margin-right: 20rpx;
            font-size: 24rpx;
            color: #b2b2b2;
            line-height: 34rpx;
          }
          .reply {
            font-size: 24rpx;
            color: #666666;
            line-height: 34rpx;
          }
        }
      }
      .rightWrap {
        width: 36rpx;
        .love {
          width: 36rpx;
          display: flex;
          flex-direction: column;
          align-items: center;
          image {
            width: 36rpx;
            height: 36rpx;
          }
          .loveWord {
            opacity: 0.66;
            font-size: 18rpx;
            color: #666666;
            line-height: 26rpx;
          }
        }
      }
    }
    .reply222 {
      margin-top: 10rpx;
      font-size: 24rpx;
      color: #ff7900;
      line-height: 34rpx;
    }
  }
}
.commentWrap2 {
  margin-top: 10rpx;
  display: flex;
  width: 100%;
  .leftWrap {
    width: 36rpx;
    height: 36rpx;
    border-radius: 34rpx;
    overflow: hidden;
    flex-shrink: 0;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .rightbox {
    flex-grow: 1;
    display: flex;
    .midle {
      margin-left: 20rpx;
      flex-grow: 1;
      .line1 {
        display: flex;
        align-items: flex-end;
        .name {
          font-size: 28rpx;
          color: #b2b2b2;
          line-height: 40rpx;
        }
        .isWriter {
          margin-left: 10rpx;
          width: 60rpx;
          height: 32rpx;
          background: #f9f9f9;
          border-radius: 18rpx;

          font-size: 20rpx;
          text-align: center;
          color: #888888;
          line-height: 28rpx;
        }
      }
      .line2 {
        margin-top: 10rpx;
        text:nth-child(1) {
          font-size: 28rpx;
          color: #666666;
          line-height: 40rpx;
        }
        text:nth-child(2) {
          font-size: 28rpx;

          color: #b2b2b2;
          line-height: 40rpx;
        }
        text:nth-child(3) {
          font-size: 28rpx;
          color: #333333;
          line-height: 40rpx;
        }
      }
      .line3 {
        margin-top: 10rpx;
        display: flex;
        .date {
          margin-right: 20rpx;
          font-size: 24rpx;
          color: #b2b2b2;
          line-height: 34rpx;
        }
        .reply {
          font-size: 24rpx;

          color: #666666;
          line-height: 34rpx;
        }
      }
    }
    .rightWrap {
      .love {
        width: 36rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        image {
          width: 36rpx;
          height: 36rpx;
        }
        .loveWord {
          opacity: 0.66;
          font-size: 18rpx;
          color: #666666;
          line-height: 26rpx;
        }
      }
    }
  }
}
</style>
